My Website

Main Content

This is the main content area.

/* style1.css */ body { font-family: Arial, sans-serif; } .outer-container { max-width: 1200px; margin: 0 auto; } .headerArea { background-color: #f8f9fa; padding: 20px; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin-right: 15px; } .inner-container { display: flex; } .left-sidebar, .right-sidebar { width: 20%; padding: 10px; } .content { width: 60%; padding: 10px; } .main-hr { border: 2px solid #007bff; } @media screen and (max-width: 700px) { .inner-container { flex-wrap: wrap; } .left-sidebar, .right-sidebar, .content { width: 100%; } } /* style2.css */ body { font-family: 'Courier New', Courier, monospace; } .outer-container { max-width: 1200px; margin: 0 auto; } .headerArea { background-color: #e9ecef; padding: 20px; } nav ul { list-style-type: square; padding: 0; } nav ul li { display: inline; margin-right: 20px; } .inner-container { display: flex; } .left-sidebar, .right-sidebar { width: 25%; padding: 15px; } .content { width: 50%; padding: 15px; } .main-hr { border: 1px dashed #28a745; } @media screen and (max-width: 700px) { .inner-container { flex-wrap: wrap; } .left-sidebar, .right-sidebar, .content { width: 100%; } } /* style3.css */ body { font-family: 'Georgia', serif; } .outer-container { max-width: 1200px; margin: 0 auto; } .headerArea { background-color: #f1f3f5; padding: 20px; } nav ul { list-style-type: circle; padding: 0; } nav ul li { display: inline; margin-right: 10px; } .inner-container { display: flex; } .left-sidebar, .right-sidebar { width: 15%; padding: 20px; } .content { width: 70%; padding: 20px; } .main-hr { border: 3px double #dc3545; } @media screen and (max-width: 700px) { .inner-container { flex-wrap: wrap; } .left-sidebar, .right-sidebar, .content { width: 100%; } }